<div nz-form>
    <div nz-row [nzGutter]="24">
        <div nz-col [nzSpan]="4">
            <nz-form-item>
                <nz-form-label>Type</nz-form-label>
                <nz-form-control>
                    <nz-select [ngModel]="pagination.type" (ngModelChange)="paginationTypeChange($event)">
                        <nz-option nzValue="all" nzLabel="All"></nz-option>
                        <nz-option nzValue="own" nzLabel="As a requester"></nz-option>
                        <nz-option nzValue="resolvable" nzLabel="As a resolver"></nz-option>
                    </nz-select>
                </nz-form-control>
            </nz-form-item>
        </div>
        <div nz-col [nzSpan]="4">
            <nz-form-item>
                <nz-form-label>State</nz-form-label>
                <nz-form-control>
                    <nz-select [ngModel]="pagination.state" (ngModelChange)="paginationStateChange($event)">
                        <nz-option nzValue="" nzLabel="All"></nz-option>
                        <nz-option nzValue="BLOCKED" nzLabel="Blocked"></nz-option>
                        <nz-option nzValue="CANCELLED" nzLabel="Cancelled"></nz-option>
                        <nz-option nzValue="DONE" nzLabel="Done"></nz-option>
                        <nz-option nzValue="RUNNING" nzLabel="Running"></nz-option>
                        <nz-option nzValue="TODO" nzLabel="Todo"></nz-option>
                        <nz-option nzValue="WONTFIX" nzLabel="Wontfix"></nz-option>
                        <nz-option nzValue="WAITING" nzLabel="Waiting"></nz-option>
                        <nz-option nzValue="DELAYED" nzLabel="Delayed"></nz-option>
                    </nz-select>
                </nz-form-control>
            </nz-form-item>
        </div>
        <div nz-col [nzSpan]="4">
            <nz-form-item>
                <nz-form-label>Template</nz-form-label>
                <nz-form-control>
                    <nz-select nzShowSearch [ngModel]="pagination.template"
                        (ngModelChange)="paginationTemplateChange($event)">
                        <nz-option nzValue="" nzLabel="All"></nz-option>
                        <nz-option *ngFor="let t of templates" [nzValue]="t.name" [nzLabel]="t.name"></nz-option>
                    </nz-select>
                </nz-form-control>
            </nz-form-item>
        </div>
        <div nz-col [nzSpan]="12">
            <nz-form-item>
                <nz-form-label>Tags</nz-form-label>
                <nz-form-control>
                    <lib-utask-input-tags (update)="inputTagsChanged($event);" [value]="pagination.tag"
                        [placeholder]="'Search tags...'" [rawTags]="tags"></lib-utask-input-tags>
                </nz-form-control>
            </nz-form-item>
        </div>
    </div>
</div>
<lib-utask-tasks-list [meta]="meta" [params]="pagination" (routeTo)="routeTo($event)" (toastInfo)="toastInfo($event)"
    (toastError)="toastError($event)" [options]="listOptions"></lib-utask-tasks-list>